<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">


<script th:inline="javascript">
    $(document).ready(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",});
        $('#transferContainer').transfer({
            titles: ['待选通道', '已选通道'],
            search: true,
            uniqueId: 'code', //唯一id
            type: 'post',
            maxSelect: 20,
            diffKey: 'flag',
            unselectColumns: [{
                field: 'flag',
                checkbox: true
            }, {
                field: 'name',
                title: '通道名称'
            }]
        });
        changeData();
        $("#service_type").change(function () {
            changeData();
        });
    });


    $(function () {
        middlegroup.admin.menu[[${OP.menuId}]].save = function (obj) {
            //获取选中的值
            var selectData = $('#transferContainer').transfer('getData', 'selectData');
            var selectCode = '';
            var unselectCode = '';
            Object.keys(selectData).forEach(function (key) {
                selectCode += selectData[key].code + ",";
            });
             selectCode=(selectCode.substring(selectCode.length-1)==',')?selectCode.substring(0,selectCode.length-1):selectCode;

            $('#selectCode').attr("value", selectCode);
            var unselectData = $('#transferContainer').transfer('getData', 'unselectData');
            Object.keys(unselectData).forEach(function (key) {
                unselectCode += unselectData[key].code + ",";
            });

            unselectCode=(unselectCode.substring(unselectCode.length-1)==',')?unselectCode.substring(0,unselectCode.length-1):unselectCode;

            $('#unselectCode').attr("value", unselectCode);
            var $form = $("#menu[[${OP.menuId}]]Form");
            if ($form.valid()) {

                middlegroup.ajaxJson({url: "/op_save_[[${OP.menuId}]]", data: $form.serializeArray()}, function () {
                    middlegroup.closeWindow();
                    $('#admin_menu[[${OP.menuId}]]_datagrid').bootstrapTable('refresh');
                });
            }
            ;
        };
    });
    function changeData() {
        var serviceType = $("#service_type").val();
        var subjectCode = $("#code_id").val();
        $.ajax({
            url: [[${MENU.channel}]] + '/getSubjectChannels' + "?serviceType=" + serviceType + "&subjectCode=" + subjectCode,
            success: function (json) {
                $('#transferContainer').transfer('refresh', json);
            }
        });

    }
</script>
<div class="ibox float-e-margins animated fadeInRight">
    <div class="ibox-content">
        <form class="form-horizontal m-t required-validate" th:id="@{menu{menuId}Form(menuId=${OP.menuId})}"
              method="POST">
            <input type="hidden" name="id" th:value="${dto?.id}"/>
            <input type="hidden" name="code" id="code_id" th:value="${dto?.code}"/>
            <input type="hidden" id="selectCode" name="selectCodes">
            <input type="hidden" id="unselectCode" name="unselectCodes">
            <div class="form-group">
                <label class="col-sm-3 control-label">主体全称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text"
                           th:value="${dto?.name}" validate="{required:true,messages:{required:'请填写主体全称'}}"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">主体简称：</label>
                <div class="col-sm-8">
                    <input name="shortName" class="form-control" th:value="${dto?.shortName}"
                           validate="{required:true,messages:{required:'请填写主体简称'}}"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">联系人手机号：</label>
                <div class="col-sm-8">
                    <input name="phone" class="form-control" th:value="${dto?.phone}"
                           validate="{required:true,messages:{required:'请填写联系人手机号'}}"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">联系人email：</label>
                <div class="col-sm-8">
                    <input name="email" class="form-control" th:value="${dto?.email}"
                           validate="{required:true,messages:{required:'请填写联系人email'}}"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio i-checks radio-inline">
                        <label><input type="radio" value="1" th:checked="${dto?.enabled == true}"
                                      name="enabled"/><i></i> 启动 </label>
                    </div>
                    <div class="radio i-checks radio-inline">
                        <label><input type="radio" value="0" th:checked="${dto?.enabled != true}"
                                      name="enabled"/><i></i> 禁用 </label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">通道类型：</label>
                <div class="col-sm-8">
                    <select class="form-control m-b" name="serviceType" id="service_type">
                        <option value="OUT" selected="selected">出款</option>
                        <p></p>
                        <option value="IN">收款</option>
                    </select>
                </div>
                <label class="col-sm-3 control-label">通道绑定：</label>
                <div class="col-sm-8">
                    <div id="transferContainer" class="row" style="height: 600px;width: 100%;"></div>
                </div>

            </div>
        </form>
    </div>
</div>
</html>